<template>
  <div class="dashboard">
    <el-row :gutter="10">
      <template v-for="item in stateAmountList" :key="item.amount">
        <el-col :span="6">
          <count-card v-bind="item" />
        </el-col>
      </template>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="7">
        <chart-card title="分类商品数量（饼图）">
          <PieEcharts :height="'300px'" :data="pieData" />
        </chart-card>
      </el-col>
      <el-col :span="10">
        <chart-card title="不同城市销量">
          <MapEcharts :height="'300px'" :map-data="mapData" />
        </chart-card>
      </el-col>
      <el-col :span="7">
        <chart-card title="分类商品的数量（玫瑰图）">
          <RoseEcharts :height="'300px'" :data="roseData" />
        </chart-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="12">
        <chart-card title="分类商品的销量">
          <LineEcharts :height="'300px'" :labels="lineData.labels" :values="lineData.values" />
        </chart-card>
      </el-col>
      <el-col :span="12">
        <chart-card title="分类商品的收藏量">
          <BarEcharts :height="'300px'" :labels="barData.labels" :values="barData.values" />
        </chart-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import useAnalysisStore from '@/store/mian/analysis';
import { storeToRefs } from 'pinia';
import CountCard from '@/views/main/analysis/dashboard/children/count-card.vue';
import ChartCard from '@/views/main/analysis/dashboard/children/chart-card.vue';
import {
  PieEcharts,
  MapEcharts,
  RoseEcharts,
  LineEcharts,
  BarEcharts
} from '@/components/page-echarts';
import { computed } from 'vue';
import { mapPieChartsData } from '@/components/page-echarts/utils/mapUtils';

// 1.头部四条数据
const analysisStore = useAnalysisStore();

// 2.发起请求，获取数据
analysisStore.fetchAnalysisDataAction();
// 3.解构store从服务器获取到的数据
const {
  stateAmountList,
  stateGoodsCategoryCount,
  stateGoodsCategorySale,
  stateGoodsCategoryFavor,
  stateGoodsAddressSale
} = storeToRefs(analysisStore);

// 饼图的数据
const pieData = computed(() => {
  return mapPieChartsData(stateGoodsCategoryCount.value ?? []);
});

// 玫瑰图的数据
const roseData = computed(() => {
  return mapPieChartsData(stateGoodsCategorySale.value ?? []);
});

// 折线图的数据
const lineData = computed(() => {
  const labels: string[] = [];
  const values: number[] = [];

  stateGoodsCategorySale.value?.forEach((item) => {
    if (item.name) labels.push(item.name);
  });
  stateGoodsCategorySale.value?.forEach((item) => {
    if (!item.goodsCount) {
      values.push(0);
    } else {
      values.push(item.goodsCount);
    }
  });
  return { labels, values };
});

// 柱状图的数据
const barData = computed(() => {
  const labels: string[] = [];
  const values: number[] = [];
  stateGoodsCategoryFavor.value?.forEach((item) => {
    if (item.name) labels.push(item.name);
  });
  stateGoodsCategoryFavor.value?.forEach((item) => {
    if (item.goodsFavor) values.push(item.goodsFavor);
  });
  return { labels, values };
});

// 地图数据
const mapData = computed(() => {
  const data: any[] = [];
  stateGoodsAddressSale.value?.forEach((item) => {
    if (item) data.push({ name: item.address, value: item.count });
  });
  return data;
});
</script>

<style scoped lang="scss">
.dashboard {
  .el-row {
    margin-bottom: 16px;
  }

  .echarts {
    height: fit-content;
  }
}
</style>
